<%--
  Created by IntelliJ IDEA.
  User: #不醒人士
  Date: 2022/12/6
  Time: 19:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>注册</title>
    <%
        String path = request.getContextPath();
        String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/css/register.css";
    %>

    <link rel="stylesheet" href="<%=basePath%>" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <style>
        a:hover{color:royalblue;}
        a:link{ text-decoration:underline;}
    </style>
</head>
<body>
    <div id="bigBox">
        <h1>REGISTER</h1>
        <h2><span >${register_msg}</span></h2>
        <div class="inputBox">
            <form action="/LibraryManagementSystem_war_exploded/user/register" id="form">
                <div class="inputText">
                    <i class="fa fa-user-circle" style="color: whitesmoke;"></i>
                    <input type="text" placeholder="请输入用户名" name="username" id="username" onblur="username()">
                    <span id="username_err" style="display:none">该用户已存在</span>
                </div>
                <div class="inputText">
                    <i class="fa fa-key" style="color:whitesmoke;"></i>
                  <input type="password" placeholder="请输入密码" name="password" id="password">
                </div>
                <div class="inputText">
                    <i class="fa fa-key" style="color:green;"></i>
                    <input type="password" placeholder="请再次输入密码" name="confirmPassword" id="confirmPassword">
                </div>
                <input type="submit" class="inputButton" value="注册"><br><br>
                <a href="<%=path%>/login_page/login.jsp" style="color: #8c939d">已有账号！去登录...</a>
            </form>
        </div>
    </div>
</body>
</html>

<script type="text/javascript">
    document.getElementById("username").onblur = function () {
        //1.获取用户名
        var username=this.value;
        //2.1创建核心对象
        var xhttp;
        if (window.XMLHttpRequest){
            xhttp=new XMLHttpRequest();
        }else{
            xhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        //2.2发送请求
        xhttp.open("Get","http://localhost:8080/LibraryManagementSystem_war_exploded/user/selectAllUser?username="+username);
        xhttp.send();
        //2.3获取响应
        xhttp.onreadystatechange =function (){
            if (this.readyState ==4 &&this.status==200){

                //用户存在，显示提示信息
                if (this.responseText=="true"){
                    document.getElementById("username_err").style.display='';
                }else
                    document.getElementById("username_err").style.display='none';
            }
        };
    }

</script>